<template>
    <div style="display:flex;">
        <div style="flex: 4">
            <el-card class="box-card" style="width: 320px;height: 630px">
                <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree>
            </el-card>
        </div>

        <div style="flex: 0.1"></div>

        <div style="flex: 19;">
            <el-card class="box-card" style="height: 630px">
                    <el-table size="small" :data="listData" highlight-current-row v-loading="loading"
                              element-loading-text="拼命加载中" style="width: 100%;">
                        <el-table-column prop="materialTitle" label="素材标题" width="200"></el-table-column>
                        <el-table-column label="素材缩略图">
                            <template slot-scope="scope">
                                <img style="height: 70px;object-fit: contain;" v-if="scope.row.materialLinksCover" :src="scope.row.materialLinksCover" class="avatar">
                                <img style="height: 70px;object-fit: contain;" v-else :src="require('@/assets/img/Pdf.png')" class="avatar">
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" min-width="150">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="chooseData(scope.row)">选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页组件 -->
                    <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                   @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                   :current-page="pagePagination.currentPage"
                                   :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="pagePagination.total">
                    </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "material_select",
    data() {
        return {
            loading: false,
            listData: [],
            data: [],
            //选中的分组
            grouping:'',
            defaultProps: {
                label: 'materialGroupName'
            },
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
        }
    },
    mounted() {
        this.getGroup();
    },
    methods: {
        getGroup(){
            this.$request('/materialGroup/selectAll', {}, 'GET').then((data) => {
                this.data = []
                this.listData = []
                for (let index in data.data){
                    //判断素材类型，企业素材==1 可查看全部
                    if (data.data[index].conversationGroupRank === this.showIndex || this.showIndex === '1'){
                        this.data.push(data.data[index])
                    }
                }
            })
        },
        queryList(){
            if (!this.showData){
                this.$message({
                    message: '请先选择分组!',
                    type: 'error'
                })
                return
            }
            var params = {
                materialGroupId : this.grouping,
                materialTitle:'',
                pageNum : this.pagePagination.currentPage,
                pageSize : this.pagePagination.pageSize
            }
            this.$request('/material/getByTitle', params, 'POST').then((data) => {
                this.listData = data.data.data
                this.pagePagination.total = data.data.total
            })
        },
        queryDataHandle(page = 1, row = 10) {
            let that = this;
            let payload = {
                materialGroupId : this.grouping,
                materialTitle:'',
                pageNum: page,
                pageSize: row
            }
            that.$request("/material/getByTitle", payload, "POST").then((data) => {
                this.listData = data.data.data
                that.pagePagination['total'] = data.data.total
                that.pagePagination['pageSize'] = row
            })
        },
        handleNodeClick(data) {
            this.grouping = data.materialGroupId
            var params = {
                materialGroupId : this.grouping,
                materialTitle:'',
                pageNum : this.pagePagination.currentPage,
                pageSize : this.pagePagination.pageSize
            }
            this.$request('/material/getByTitle', params, 'POST').then((data) => {
                this.listData = data.data.data
                this.pagePagination.total = data.data.total
            })
        },
        chooseData(row) {
            this.$emit("getData", row)
        }
    }
}
</script>

<style scoped>

</style>